<template>
	<view class="attention">
		<u-search placeholder="输入用户名搜索" v-model="realname" :clearabled="true" :show-action="false" height="30"
			@change="handleSearchChange" @clear="handleSearchChange" shape="square"></u-search>
		<scroll-view :scroll-top="scrollTop" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
			@refresherrefresh="onRefresh" :refresher-threshold="50" @scrolltolower="scrolltolower"
			class="attention_scroll_view" v-if="dataSouse.length">
			<view class="attention_scroll_view_item" v-for="item in dataSouse" :key="item?.id">
				<view class="attention_scroll_view_item_left">
					<image :src="item?.avatar" v-if="item?.avatar"></image>
					<image src="http://qianxueapplet.suoeryun.com/child.png" v-else></image>
					<text>{{item?.realname}}</text>
				</view>
				<button class="attention_scroll_view_item_right" @click="handleAttention(item)"
					:class="{followed:item?.izFollow === '1',unFollowed:item?.izFollow === '0'}">{{item?.izFollow === '1'?'互相关注':'回关'}}</button>
			</view>
			<u-loadmore :status="status" @loadmore="scrolltolower" v-if="status !== 'nomore'"></u-loadmore>
		</scroll-view>

		<u-empty v-else marginTop="100" text="暂无粉丝"
			icon="http://qianxueapplet.suoeryun.com/fs.png"></u-empty>
	</view>
</template>

<script lang="ts" setup>
	import { ref, unref, reactive, onMounted, onUnmounted } from 'vue';
	import { queryFanList, qxUserConcernAdd } from '@/config/mine.api';

	const realname = ref('');
	const dataSouse = ref([]);
	const triggered = ref(false);
	const scrollTop = ref(0);
	const status = ref('loadmore');
	const pagination = reactive({ pageNo: 1, total: 0, pageSize: 10 });

	onMounted(() => {
		loadData()
	})

	onUnmounted(() => {
		console.log('onUnmounted');
		uni.$emit('circleUpdate');
	})

	/**
	 * 加载数据
	 */
	async function loadData() {
		if (pagination.pageNo === 1) {
			dataSouse.value = [];
		}
		status.value = 'loading';
		const res = await queryFanList({ ...pagination, realname: unref(realname) });
		triggered.value = false;
		pagination.total = res?.total;
		dataSouse.value?.push(...res?.records);
		if (unref(dataSouse)?.length < pagination.total) {
			status.value = 'loadmore';
		} else {
			status.value = 'nomore';
		}
	}

	/**
	 * 搜索监听
	 */
	function handleSearchChange(value) {
		pagination.pageNo = 1
		realname.value = value ?? '';
		uni.$u.throttle(loadData, 1000, false);
	}


	/**
	 * 滚动到底部操作
	 */
	function scrolltolower() {
		if (unref(dataSouse)?.length < pagination.total && (unref(dataSouse)?.length / pagination.pageSize == pagination.pageNo)) {
			pagination.pageNo++;
			loadData();
		}
	}

	/**
	 * 自定义下拉刷新被触发
	 */
	function onRefresh() {
		triggered.value = true;
		pagination.pageNo = 1;
		loadData();
	}

	/**
	 * 关注
	 */
	async function handleAttention(item) {
		const res = await qxUserConcernAdd({ izFollow: item?.izFollow === '0' ? '1' : '0', userId: item?.userId });
		if (!uni.$u.test.object(res)) {
			item.izFollow = res;
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-search {
		background-color: #ffffff;
		padding: 16rpx 32rpx;
	}

	.attention_scroll_view {
		height: calc(100vh - 30px);
	}
</style>